<template>
    <div class="orderCont" :style="'min-height: '+docheight+'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="orderList">
          <div class="navCont">
              <div @click="navFn(item,index)" :class="navId==item.id?'navItem navActive':'navItem'" :key="index" v-for="(item,index) in navArr">{{ item.name }}</div>
          </div>
          <div class="orderItem" :key="index" v-for="(item,index) in orderList">
            <div class="shopTop">
              <div class="shopNameCont">
                <div class="shopName">发起时间:{{ item.create_time }}</div>
              </div>
              <div class="orderStatus">
                <span class="redText">拼单中</span>
              </div>
            </div>
            <div class="goodsList">
              <div class="goodsItem" :key="index2" v-for="(item2,index2) in item.goods_info">
                <div class="goodsImg" @click="toDetail(item,index)">
                  <img :src="item2.goods_image+ossSrc">
                </div>
                <div class="goodsInfo">
                  <div class="goodsName">{{ item2.goods_name }}</div>
                  <div class="goodsType">
                    <div class="goodsTypeItem">商品数量：{{ item2.num }}{{ item2.goods_unit }}</div>
                    <div class="goodsInfoPrice">
                        <div>¥{{ item2.pt_price }}</div>
                    </div>
                  </div>
                  <div class="goodsCtrl">
                    <div class="groupUser">
                        <div class="userImg">
                            <img :src="item.head_img+ossSrc" />
                        </div>
                        <div class="userImg userImg2">
                            <img src="static/img/addImg.png" />
                        </div>
                    </div>
                    <div class="orderBtn greenBtn" @click="joinFn(item,index)">参与拼团(1/2)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="loadMore" v-if="isChageNav">数据请求中~</div>
        <div class="loadMore" v-if="orderList.length>0&&!isChageNav">{{ loadMoreText }}</div>
        <nodata v-if="orderList.length==0&&!isChageNav" text="暂无可拼团~"></nodata>
      </div>
      <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
      <sub-load v-if="showLoad"></sub-load>
      <footcpm></footcpm>
    </div>
  </template>
  
  <script>
  import nodata from '@/components/public/nodata'
  import footcpm from '@/components/footcpm'
  import SaveBtn from "@/components/public/saveBtn.vue";
  
  import { Teamwork} from '@/http/api'
  import {Toast,Confirm } from 'vux'
  import getLoad from '@/components/public/getLoad'
  import subLoad from '@/components/public/subLoad.vue'
  
  import getTimeOut from '@/components/public/getTimeOut'
  export default {
    components:{SaveBtn,footcpm,subLoad,getLoad,getTimeOut,nodata,Toast,Confirm},
    data(){
      return{
        loadMoreText:'数据加载中~',
        showLoad:false,
        showTimeOut: false,
        showCont:true,
        showText:'',
        showToast:false,
        per_page:10,
        page:1,
        orderList:[],
        
        showConfirm:false,
        // 分页
        isChageNav:false,
        getting:false,
        last_page:0,
        navArr:[
            {name:'外卖拼团',id:2},
            {name:'到店拼团',id:1},
        ],
        navId:2,
      }
    },
    methods:{
      joinFn(item,index){
        let arr = [{goods_id:item.goods_info[0].goods_id,num:1}]
        arr = JSON.stringify(arr)
        this.$router.push({path:'/orderWait',query:{goods_save:arr,cartIds:'',isGroup:2,order_id:item.order_id,order_type:item.order_type}})
      },
      toDetail(item){
        this.$router.push({path:'/detail',query:{id:item.goods_info[0].goods_id,order_id:item.order_id,order_type:item.order_type}})
      },
      navFn(item){
          this.navId = item.id
          this.orderList = []
          this.page = 1
          this.last_page = 0
          this.getData()
      },
      getData(){
        let data ={
          order_type:this.navId,
          per_page:this.per_page,
          page:this.page,
        }
        this.isChageNav = true
        Teamwork(data).then((res)=>{
          if(res.data.code==1){
            let arr = res.data.data.data
            for(let i=0;i<arr.length;i++){
              this.orderList.push(arr[i])
            }
            setTimeout(() => {
              this.getting = false
            }, 100);
            this.last_page = res.data.data.last_page
            if(this.page==this.last_page){
              this.loadMoreText = '到底啦～'
            }else{
              this.loadMoreText = '数据加载中~'
            }
          }else{
            this.showToast = true
            this.showText = '订单获取失败'
          }
          this.showCont= true
          this.isChageNav = false
  
        }).catch(()=>{
          this.showCont = true
          this.showTimeOut = true
        })
      },
      nextfn(){
        if(this.$route.path == '/group'){
          let h = document.documentElement.scrollHeight||document.body.scrollHeight
          let wh = document.documentElement.clientHeight||document.body.clientHeight
          let top = document.documentElement.scrollTop||document.body.scrollTop
          let bottom = h-wh-top
          if(bottom<=50){
            if(this.getting==false){
              if(this.last_page>this.page){
                this.getting=  true
                this.page++
                this.getData()
              }
            }
          }
        }
      }
    },
    mounted() {
      window.addEventListener('scroll',this.nextfn)
    },
    created() {
      this.getData()
    }
  }
  </script>
  
  <style scoped lang="less">
  .orderCont{
    width: 100%;
    background-color: #f9f1f1;
    box-sizing: border-box;
    padding-bottom: 3.25rem;
    padding-top: 0.75rem;
    .orderList{
      width: 100%;
      padding: 0.25rem 4%;
      box-sizing: border-box;
      .navCont{
          display: flex;
          justify-content: space-between;
          background-color: #fff;
          margin-bottom: 0.75rem;
          padding: 0.75rem 4%;
          border-radius: 0.25rem;
          box-sizing: border-box;
          .navItem{
              text-align: center;
              width: 45%;
              background-color: #f9f1f1;
              padding: 0.5rem 0;
              text-align: center;
              font-size: 0.6rem;
              border-radius: 1rem;
              color: #666;
          }
          .navActive{
              background-color: #e95551;
              color: #fff;
          }
      }
      .orderItem{
        width: 100%;
        background-color: #fff;
        margin-bottom: 0.75rem;
        border-radius: 0.25rem;
        padding: 0 0.75rem 1rem;
        box-sizing: border-box;
        .shopTop{
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          .shopNameCont{
            flex: 1;
            width: 0.5rem;
            display: flex;
            padding: 0.75rem 0;
            align-items: center;
            margin-right: 0.5rem;
            .shopName{
              font-size: 0.6rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #666;
            }
            .icon-jinrujiantou{
              font-size: 0.8rem;
              position: relative;
            }
          }
          .orderStatus{
            font-size: 0.6rem;
            .redText{
              color: #f9406e;
            }
            .greenText{
              color: #85CE61;
            }
            .blackText{
              color: #666;
            }
            .blueText{
              color: #96A1FE;
            }
          }
        }
        .goodsList{
          width: 100%;
          .goodsItem{
            width: 100%;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            .goodsImg{
              width: 5rem;
              height: 5rem;
              overflow: hidden;
              border-radius: 0.25rem;
              margin-right: 0.5rem;
              img{
                width: 100%;
              }
            }
            .goodsInfo{
              width: 0.5rem;
              flex: 1;
              display: flex;
              flex-direction: column;
              height: 5rem;
              justify-content: space-between;
              .goodsName{
                width: 100%;
                line-height: 1rem;
                font-size: 0.7rem;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: nowrap;
              }
              .goodsType{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .goodsTypeItem{
                  padding:0.1rem 0.5rem;
                  background-color: #f9f1f1;
                  font-size: 0.6rem;
                  height: 1rem;
                  line-height: 1rem;
                  border-radius: 0.75rem;
                  color: #f87e80;
                }
                .goodsInfoPrice{
                    color: #999;
                    font-size: 0.8rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #e95551;
                }
              }
              .goodsCtrl{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content:space-between;
                    .groupUser{
                        display: flex;
                        .userImg{
                            background-color: #666;
                            padding: 0.1rem;
                            box-sizing: border-box;
                            font-size: 0;
                            height: 1.7rem;
                            width: 1.7rem;
                            border-radius: 50%;
                            img{
                                width: 100%;
                                border-radius: 50%;
                            }
                        }
                        .userImg2{
                            position: relative;
                            left: -0.4rem;
                        }
                    }
                    .orderBtn{
                        padding: 0.35rem 0.75rem;
                        text-align: center;
                        border-radius: 1rem;
                        font-size: 0.6rem;
                        box-sizing: border-box;
                        margin-left: 0.5rem;
                        border: 1px solid #e95551;
                        color:#fff;
                        background: #e95551;
                    }
                }
            }
          }
        }
      }
    }
    .loadMore{
      text-align: center;
      padding: 0.75rem 0;
      font-size: 0.6rem;
      color: #e95551;
    }
    .orderMask{
    padding: 0.75rem;
    box-sizing: border-box;
    .maskTitle{
      font-size: 0.8rem;
      font-weight: bold;
      text-align: center;
    }
    .maskTip{
      margin-top: 0.5rem;
      line-height: 1.1rem;
    }
  }
  }
  </style>
  